<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第三天 数据驱动视图</title>
</head>
<body>
	<div id="app">
		<App></App>
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		/*  生命周期钩子
			beforeCreate	组件创建之前	很少用 初始化使用
			created  		组件创建之后	经常用 请求后台
			beforeMount		挂载数据到DOM之前
			mounted			挂载数据到DOM之后	 常用 操作DOM
			beforeUpdate	更新DOM之前调用该钩子，可以获取原始的DOM
			updated			更新DOM之后调用该钩子，可以获取最新的DOM
			activated 		组件被激活了	缓存中使用	<keep-alive></keep-alive>
			deactivated		组件被停用了	缓存中使用	<keep-alive></keep-alive>
			beforeDestroy	销毁之前	很少用
			destroyed		销毁之后
			errorCaptured	基本不用
		 */



		Vue.component('Test',{
			data(){
				return{
					msg:'hello world'
				}
			},
			template:`	<div>
							<div>
								{{ msg }}
								<button @click="clickHandler">改变</button>
							</div>
						</div>`,
			methods:{
				clickHandler(){
					this.msg = this.msg+'测试'
				}
			},
			beforeCreate:function(){
				console.log(this);
			},
			created:function(){
				console.log(this.msg);
			},
			beforeMount:function(){
				console.log(document.getElementById('app'));
			},
			mounted:function(){
				console.log(document.getElementById('app'));
			},
			beforeUpdate:function(){
				console.log(document.getElementById('app').innerHTML);
			},
			updated:function(){
				console.log(document.getElementById('app').innerHTML);
			},
			beforeDestroy:function(){
				console.log('beforeDestroy');
			},
			destroyed:function(){
				console.log('destroyed');
			},
			activated:function(){
				console.log('组件被激活了');
			},
			deactivated:function(){
				console.log('组件被停用了');
			}
		});

		let App={
			data(){
				return{
					i:true
				}
			},
			//vue内置组件 <keep-alive></keep-alive> 能在组件的切换过程中将状态保留在内存中。防止重复渲染DOM
			//beforeDestroy和destroyed 失效
			template:`<div class='app'>
						<keep-alive>
							<Test v-if='i'/>
						</keep-alive>
						<button @click="clickHandler">改变</button>
					  </div>`,
			methods:{
				clickHandler(){
					this.i=!this.i
				}
			}
		};

		new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			components:{
				App
			}
		});
	</script>
</body>
</html>
